<template>
  <div class="BaseSession">
    <div class="sessionTitle">{{ Session.title }}</div>
    <div class="sessionContent noPadding PromptSelecterWrap">
      <PromptSelecter v-for="(selecter, index) in Session.includeSelecter" 
      :Selecter="SelecterList.filter( sel => sel.selecterId == selecter.selecterId)[0]" @change="SelecterChange" 
      :exclude="selecter.excludeOption" 
      :nowData="SelectedPrompt.filter(sel => sel.selecterId == selecter.selecterId).length>0?SelectedPrompt.filter(sel => sel.selecterId == selecter.selecterId)[0].optionId:-1"
      ></PromptSelecter>
      <div class="CB"></div>
    </div>
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .PromptSelecterWrap{padding-bottom: 8px !important; text-align: left;}
</style>

<script>
import PromptSelecter from '../element/PromptSelecter.vue'
export default {
  name: 'PromptSession',
  components: { PromptSelecter },
  props: {
    /* { "tabId": 1, "title": "常用", "basePrompt": "", "baseParm": "", "sessionGroup": [ 1 ] }*/
    Session:{ 
      type: Object,
      value: null
    },
    SelecterList:{
      type: Object,
      value: null
    }
  },
  data () {
    return {
      SelectedPrompt:[],
    }
  },
  mounted(){
    console.log(this.Session)
  },
  methods: {
    SelecterChange(e){
      console.log('元素选择：',e);
      if(e.optionId == -1){
        this.SelectedPrompt = this.SelectedPrompt.filter(sel => sel.selecterId != e.selecterId);
      }else{
        var hasRecord = false;
        for(var i = 0; i < this.SelectedPrompt.length; i++){
          if(this.SelectedPrompt[i].selecterId == e.selecterId){
            console.log('setted')
            this.SelectedPrompt[i] = JSON.parse(JSON.stringify(e));
            hasRecord = true
          }
        }
        if(!hasRecord){
          this.SelectedPrompt.push(e)
        }
        this.$emit('change',{
          groupId: this.Session.groupId,
          title:this.Session.title,
          desc:this.Session.desc,
          data: this.SelectedPrompt
        });
      }
    }
  }
}
</script>
